<template>
  <div>
    <!--点击右上角分享提示-->
    <share v-if="shareState" @cancel="shareState = !shareState"></share>
    <!--点击右上角分享提示end-->
    <div v-if="$route.query.guoqi" class="goBack" @click="go"></div>
    <div class="whiteBg expired_detail">
      <div class="padding_common">
        <!-- 轮播图 -->
        <slide-img :divStyle="0" :bannerArry='banner'></slide-img>
      </div>
      <div class="merInfo">
        <div class="card_name">
          {{mchtInfoTwo.name || mchtInfoTwo.mchtName}}
        </div>
        <div class="coupon_info_item">
          <star :couponComScore="mchtInfoTwo.mchtComScore"></star>
          <p class="info_pad">{{mchtInfoTwo.mchtComNum}}条</p>
        </div>
        <div class="coupon_info_item">
          <span v-if="mchtInfoTwo.distance" class="right">{{mchtInfoTwo.distance | setDistance}}</span>
          <span class="right">{{mchtInfoTwo.mchtArea}}</span>
          <span class="red_color">￥{{mchtInfoTwo.mchtPer}}/人</span><span
            class="pad_l">{{mchtInfoTwo.mchtTypeValue || mchtInfo.mchtTypeValue}}</span>
        </div>
      </div>
    </div>
    <div class="expired_detail mgt15">
      <div class="exchange_card">
        <div class="cardBg1 white_bg">
          <div class="bgLine"><img src="../../images/cardBg_04.png"></div>
          <a class="cardBg2">
            <div class="card_tit" v-if="dateNum < 7" v-show="dayShow">
              <span v-if="dateNum > 0" class="expired-tit right">{{dateNum}}天后过期</span>
              <span v-else="dateNum == 0" class="expired-tit right">今天过期</span>
              <p>
                <img v-if="couponParam.promAppro=='buy'" style="width: 1rem;height:1rem;z-index: 4;"
                     src="../../images/cashIcon.png"/>
                <img v-if="couponParam.couponTypes=='third'" style="width: 1rem;height:1rem;z-index: 4;"
                     src="../../images/dui.png"/>
                {{couponParam.mchtName}} </p>
            </div>
            <div class="couponDiv">
              <coupon-denomination :item="couponParam"></coupon-denomination>
            </div>
            <div class="card_info">
              <div class="card_name">{{couponParam.couponName}}
                <a class="icon_share_cardList" @click.stop="clickIconShare(couponParam)"
                   v-if="couponParam.delayed!=4 && !(couponParam.type2 == 'useonly' || (couponParam.couStat == 'used' && couponParam.couponTypes == 'third' || couponParam.couStat == 'listing'&& couponParam.type2=='default' ))">
                  <icon iconName="#icon-fenxiang"></icon>
                  分享&nbsp;&nbsp;
                </a>
              </div>
              <div class="coupon_info_item">
                <star :couponComScore="couponParam.comScore"></star>
                <p class="info_pad">{{couponParam.comNum}}条 &nbsp;&nbsp;{{couponParam.couponType | couponTp}}<span
                    class="color-red">{{expiredNum}}</span>张</p>
              </div>

              <div class="coupon_info_item color_gray">
                已售出   {{couponParam.soldnum}}   &nbsp;&nbsp;&nbsp;已使用   {{couponParam.usednum}}
              </div>
            </div>
          </a>
          <a class="card_btn" @click="upDown">
            <div class="used_card_detail whiteBg">
              <div class="coupon_dtl_tit">使用须知<i
                  :class="useStatus?'iconfont icon-iconfontunfold right':'iconfont icon-right right'"></i></div>
              <div class="coupon_dtl_instr" v-show="useStatus">
                <ul>
                  <li v-if="scpoe"><span>{{scpoe + extra}}</span></li>
                  <li>
                    <span>有效期{{couponParam.validatyBegin | strDate(3)}}至{{couponParam.validatyEnd | strDate(3)}}</span>
                  </li>
                  <li v-if="couponParam.disableDate"><span>{{couponParam.disableDate | businessDay}}不可以使用</span></li>
                  <li><span>使用时间：{{userTime}}</span></li>
                  <li v-if="couponParam.restricted"><span>满{{couponParam.restricted}}元可使用</span></li>
                </ul>
              </div>
              <div class="coupon_dtl_instr2" v-show="useStatus">
                <ul>
                  <li v-if="diejia"><i class="iconfont icon-kediejiashiyong-"></i>可叠加使用</li>
                  <li style="min-width: 50%;" v-if="gongtong"><i
                      class="iconfont icon-keyuqitadianziquangongtongshiyong-"></i>可与其他电子券同时使用
                  </li>
                  <li><i class="iconfont icon-buzhaolingbuduixian-"></i>不找零不兑现</li>
                </ul>
              </div>
            </div>

          </a>
        </div>
      </div>
      <a :class="this.$route.query.flag?'next_btn next_btn_pa disabled':'next_btn next_btn_pa'" v-if="!(couponParam.couStat == 'listing' && couponParam.type2=='default')"
         @click="use(couponParam)">立即使用</a>
    </div>
    	<modal v-if="thirdDescArrState">
    	<div class="model">
    		<div class="modalTxt">使用须知</div>
    		<div>
    			<ul class="modalUl">
    				<li v-for="item in thirdDescArr">{{item}}</li>
    			</ul>
    		</div>
    		<div class="modalBtn" @click="modalBtn(couponParam)">确定</div>
    	</div>
    </modal>
    <remind-modal v-if="shareInfo" :type="shareType" @close="shareInfo = false"
                  @click_btn="reward_modal_btn"></remind-modal>
  </div>
</template>
<script>
  import slideImg from '../../componentes/global/slideImg.vue'
  import RemindModal from '../../componentes/global/reward/remind.vue'
  import star from '../../componentes/global/star.vue'
  import getData from '../../service/getData.js'
  import getData2 from '../../service/getData2.js'
  import getData4 from '../../service/getData4.js'
  import * as types from '../../vuex/types.js'
  import {mapState} from 'vuex'
  import {Toast, Indicator, MessageBox} from 'mint-ui'
  import {Storage} from 'src/utils/storage.js'
  import share from '../../componentes/global/share.vue'
  import {
    Common
  } from 'src/utils/common.js'

  export default {
    components: {
      slideImg,
      star,
      RemindModal,
      share
    },
    data() {
      return {
        useStatus: true,
        mchtInfo: '',
        mchtInfoTwo: '',
        couponParam: '',
        dateNum: '',
        diejia: '',
        gongtong: '',
        extra: '',
        expiredNum: '',
        banner: [],
        scpoe: "",
        userTime: '',
        info: {},
        shareInfo: false, //有奖励金的提示框
        shareType: '', //点击按钮的类型：分享、扫码、使用
        useCouponId: '',
        useMchtId: '',
        currentItem: {},
        shareState: false, //分享遮罩开关
        thirdDescArrState:false,
        thirdDescArr:[],
        couNo:'',
        dayShow:false
      }
    },
    watch: {
      shareState(v) {
        if (!v) {
          Common.wechatShare() // 恢复全局的邀请链接
        }
      }
    },
    methods: {
      async clickIconShare(data) {
        /*请求该券券码*/
        let result = await getData4.findShareCouponNo({
          method: 'post',
          data: {
            couponId: data.couponId,
            mchtId: data.mchtId,
            usrId: this.userInfo.usrId
          }
        });
        let cpCodeList = [];
        if (result.respCode === "00") {
          cpCodeList = JSON.parse(result.content).couponNos.split(',')
        } else {
          Toast({
            message: result.errorInfo,
            duration: 800
          });
          setTimeout(() => {
            this.$router.push({
              path: '/cardList'
            })
          }, 1000)
          return
        }

        let scpoeList = await getData4.getScpoeString({mchtId: data.mchtId, scpoe: data.scpoe}); // 可用或不可用商品类型
        this.shareState = true;
        Common.setWechatShare({
          title: "文字不是重点，好友分享不可辜负哦！", // 分享标题
          desc: "你的好友" + `${this.userInfo.usrName}` + "分享了一张优惠券给你，速速收下吧", // 分享描述
          link: '/getFriendCoupon?mchtId=' + data.mchtId + '&usrId=' + this.userInfo.usrId + '&couponId=' + data.couponId + '&cpCode=' + cpCodeList[0], // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: process.env.DOMAIN_NAME + "/shareCouponForFriend.jpg"
        })
      },
      getDayTime(value) { // 计算优惠券还有几天过期
        value = value.substring(0, 4) + '/' + value.substring(4, 6) + '/' + value.substring(6, 8);
        let day = new Date(value).format("Y/MM/dd 23:59:59");
        return Math.floor(((new Date(day).getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24)))
      },
      go() {
        this.$router.push({path: '/cardList', query: {goCenter: true}});
      },
      //使用须知
      upDown: function () {
        if (this.useStatus) {
          this.useStatus = false
        } else {
          this.useStatus = true
        }
      },
      //商户广告
      shopBanner: function () {
        var me = this;
        getData2.shopBanner({
          method: 'post',
          data: {"aoData": "", "mchtId": me.$route.params.mchtId, "state": ""}
        }).then(function (rep) {
          // console.log(1111)
          if (rep.respCode == '00') {
            me.banner = rep.content.list;
          } else {
            Toast({
              message: rep.errorInfo,
              duration: 1000
            });
          }

        })
      },
      // 奖励提醒
      rewardRemind(type, coupon) {
        this.shareInfo = true; //打开分享奖励提示
//       if (type === 'button' || type === 'scan'|| type === 'onlyTwo'|| type === 'scanOnlyTwo') { // 分享 扫描
//         this.shareType = type;
//       } else if (type === 'use') {
//         this.shareType = 'use';
//       }
        this.shareType = type
        this.currentItem = coupon
      },
      //有奖励机制的优惠券操作：分享、扫码、使用
      reward_modal_btn() {
        this.use(this.currentItem, true)
      },
      //使用按钮
      use: async function (params, nextStep) {
        let me = this
        if (me.$route.query.used) {
          me.$router.push({
            'name': 'usedRedeemCode',
            query: {couponId: params.couponId, mchtId: params.mchtId}
          });
          return
        }
        /*请求该券券码*/
        let result = await getData4.findShareCouponNo({
          method: 'post',
          data: {
            couponId: params.couponId,
            mchtId: params.mchtId,
            usrId: this.userInfo.usrId
          }
        });
        if (result.respCode === "00") {
//        var me = this
          //console.log(params.type)
       
          this.info = {
            resultt: '',
            Codetypes: params.couponType,
            name: params.couponName,
            mchtName: params.mchtName,
            soldnum: params.soldnum,
            usednum: params.usednum,
            mchtId: params.mchtId,
            denomination: params.denomination,
            couponId: params.couponId,
            num: params.num,
            validatyBegin: params.validatyBegin,
            validatyEnd: params.validatyEnd
          };
          Storage.set("info", me.info, true);
          this.useCouponId = params.couponId;
          this.useMchtId = params.mchtId;
          if (!nextStep && params.useAmt) { //判断此券是否有奖励机制

            this.rewardRemind('use', params)
          } else {
            getData.findCode({
              method: 'post',
              data: {
                couponId: this.useCouponId,
                mchtId: this.useMchtId,
                usrId: me.userInfo.usrId
              }
            }).then(function (rep) {
              if (rep.respCode == '01') {
                Toast({
                  message: rep.errorInfo,
                  duration: 1000
                });
              } else {
                if (params.couponTypes == 'third') {
                   me.couNo = JSON.parse(rep.content).couponNos.split(',')[0]
                  getData.findThirdDesc({
                    method: 'post',
                    data: {mchtId: params.mchtId, couponId: params.couponId}
                  }).then(function (res) {
                    let message = res.content.content.thirdDesc
                    if (message != '') {
                    	if(res.content.content.thirdType!=='url'){
                    		me.thirdDescArr=res.content.content.thirdDesc.split('；')
                    	me.thirdDescArrState=true
                    	}else{
                    		  me.$router.push({
                          'name': 'RedeemCode',
                          query: {
                            couNo: me.couNo,
                            mchtId: params.mchtId,
                            couponId: params.couponId,
                            couponNum: me.expiredNum,
                            guoqi: true,
                            thirdUrlState:true
                          }
                        });
                    	}

                    } else {
                      me.$router.push({
                        'name': 'RedeemCode',
                        query: {
                          couNo: me.couNo,
                          mchtId: params.mchtId,
                          couponId: params.couponId,
                          couponNum: me.expiredNum,
                          guoqi: true
                        }
                      });
                    }

                  })

                } else {
                  me.$router.replace({
                    'name': 'useYunConpons',
                    query: {
                      guoqi: true,
                      mchtId: params.mchtId,
                      couponId: params.couponId,
                      couponNum: me.expiredNum
                    }

                  });
                }
              }
            })
          }
        } else {
          Toast({
            message: result.errorInfo,
            duration: 800
          });
          setTimeout(() => {
            this.$router.push({
              path: '/cardList'
            })
          }, 1000)
        }

      },
      modalBtn(params){
      	let me=this
      	       me.$router.push({
                          'name': 'RedeemCode',
                          query: {
                            couNo: me.couNo,
                            mchtId: params.mchtId,
                            couponId: params.couponId,
                            couponNum: me.expiredNum,
                            guoqi: true
                          }
                        });
      }
    },
    created: function () {
      this.shareType = ''
      var me = this;
      // Indicator.open('加载中...');
      this.$store.commit('changeState', true)
      this.shopBanner();
      me.expiredNum = me.$route.params.couponNum;
      //商户详情
      // getData.mcht({position:me.position || '121.47,31.23',mchtId:me.$route.params.mchtId}).then(rep => {
      //     me.mchtInfo = rep.content;
      //     me.mchtInfoTwo = rep.content.mchtSearch;
      // });
      //商户详情  || '121.47,31.23'
      var cityGet = Storage.get("city", true);
      getData.mchtNew({
        method: 'post',
        data: {cityName: cityGet, position: me.position},
        mchtId: me.$route.params.mchtId
      }).then(rep => {
        if (rep.content.mchtSearch) {
          // Indicator.close();
          me.mchtInfo = rep.content;
          me.mchtInfoTwo = rep.content.mchtSearch;
        } else {
          getData.mchtNo({mchtId: me.$route.params.mchtId}).then(rep => {
            // Indicator.close();
            me.mchtInfo = rep.content;
            me.mchtInfoTwo = rep.content.mcht;
          });
        }
      });
      //电子券详情
      getData4.getDishType({mchtId: me.$route.params.mchtId}).then(data => {
        var scpoeList = data.content.lowTypeNameList

        getData.getCouponInfo({
          "method": 'post',
          data: {
            "couponId": me.$route.params.couponId,
            "mchtId": me.$route.params.mchtId,
            "seqNo": "",
            "usrId": "",
            "usrPicId": ""
          }
        }).then(rep => {
          rep.content.couponId = me.$route.params.couponId;
          me.couponParam = rep.content;
          me.couponParam.couStat = this.$route.query.couStat;
          me.couponParam.type2 = this.$route.query.type2
          me.dateNum = me.getDayTime(me.couponParam.validatyEnd)
          me.dayShow=true
          if (rep.content) {
            me.diejia = rep.content.useRule.indexOf("M") >= 0;
            me.gongtong = rep.content.useRule.indexOf("D") >= 0;
            // me.userTime = rep.content.useTime.split(",").join(" ");
            me.userTime = rep.content.useTime;
            if (rep.content.scpoe.indexOf("T") >= 0) {
              me.extra = "不可用"
            } else {
              me.extra = "可用"
            }

            //获取商户可用或非可用菜类列表
            let scpoe = rep.content.scpoe.substr(1, rep.content.scpoe.length + 1).split(",")
            let type = [];
            scpoe.find(data => {
              scpoeList.forEach(value => {
                if (value.typeId == data) {
                  type.push(value.typeName);
                }
              })
              me.scpoe = type.join("、")
            })
          }
        })
      });
    },
    computed: {
      ...mapState({
        userInfo: state => state.user.userInfo,
        position: state => state.coupon.position
      })
    }
  }
</script>
<style scoped>
  .icon_share_cardList {
    color: #999999;
    margin-right: -10px;
  }

  /*.expired_detail{margin-bottom: 1.8rem;}*/
  .expired_detail .merInfo {
    border: none;
  }

  .expired_detail .exchange_card {
    position: relative;
    background-color: transparent;
    height: 26.5rem; /*margin-bottom: 1.8rem;*/
  }

  .expired_detail .card_tit {
    /* text-align: center;*/
    color: #ff0000;
    font-size: 1rem;
  }

  .used_card_detail {
    padding-bottom: 0.4rem;
    text-align: left
  }

  .expired_detail .card_btn {
    padding: 0;
  }
  .next_btn_pa {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    margin: 0;
    border-radius: 0;
    z-index: 12;
  }
  .disabled{
    background-color:#ccc;
  }

  .expired_detail .coupon_dtl_instr2 {
    margin: 0;
    padding: 0.5rem 0.667rem 0;
  }

  .expired_detail .coupon_dtl_tit {
    color: #333;
    padding-right: 0.667rem;
  }

  .expired_detail .exchange_card .bgLine {
    top: 8.8rem;
  }

  .merInfo .coupon_info_item {
    padding: 0.3rem 0 0.2rem;
    line-height: 1
  }

  .cardBg2 {
    top: 0;
    left: 0;
  }

  .info_pad {
    line-height: 1.4rem;
  }

  .goBack {
    z-index: 30;
    position: absolute;
    left: 0;
    top: 0rem;
    width: 50px;
    height: 50px;

  }
    .model{ 	
	min-height: 10rem;
	width: 90%;
	background: #ffffff;
	border-radius: 1rem;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  .modalTxt{	
  	height: 2rem;
  	line-height: 2rem;
  	text-align: center;
  	width: 100%;
  }
  .modalUl{
  	width: 100%;
  	padding:1rem 2rem;
  	min-height: 6rem;
  	word-break:break-all;
  }
  .modalBtn{
  	background: #ee5088;
  	color:#FFFFFF ;
  	text-align: center;
  	line-height: 2.5rem;
  	height: 2.5rem;
  	width: 100%;
  	border-bottom-left-radius: 1rem;
  	border-bottom-right-radius: 1rem;
  }
</style>






